<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/10
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>Title</title>
    <%-- 引入css和js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.8.1/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/static/layui-v2.8.1/layui/layui.js"></script>
    <%--    <script src="${pageContext.request.contextPath}/static/layui-v2.8.1/layui/js/treeTable.js"></script>--%>

</head>
<body>
<div class="layui-form-item">
    <label for="" class="layui-form-label">菜单图标</label>
    <div class="layui-input-block">
        <input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2"
               class="hide">
    </div>
</div>
<script>

    layui.config({
        base: '${pageContext.request.contextPath}/static/js/' //假设这是你存放拓展模块的根目录
    }).extend({ //设定模块别名
        iconPicker: 'iconPicker' //如果 mymod.js 是在根目录，也可以不用设定别名

    });
    layui.use(['iconPicker'], function () {
        var $ = layui.$

        var iconPicker = layui.iconPicker;

        //图标查看器
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker2',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });


    })
</script>
</body>
</html>
